<div nz-row class="container">
    <div class="search-box">
        <nz-card [nzBordered]="false">
            <form nz-form [nzLayout]="'inline'" [formGroup]="searchForm">
                <nz-form-item>
                    <nz-form-label>关键词</nz-form-label>
                    <nz-form-control>
                        <input formControlName="detentionName" nz-input placeholder="关键词"/>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-control>
                        <button nz-button nzType="primary" (click)="getGridData(true)"><i nz-icon
                                                                                          nzType="search"></i>搜索
                        </button>
                        <button nz-button nzType="danger" (click)="openEditModal()" style="margin-left: 10px"><i
                            nz-icon nzType="plus" nzTheme="outline"></i>新增
                        </button>
                    </nz-form-control>
                </nz-form-item>
                <nz-form-item>
                    <nz-form-label>近期搜索</nz-form-label>
                    <nz-form-control>
                        <ng-container *ngIf="!latestList.length">
                            <span>暂无记录</span>
                        </ng-container>
                        <ng-container *ngIf="latestList.length">
                            <a *ngFor="let item of latestList" class="latest-item" (click)="getLatestData(item)">{{item.keyword}}</a>
                        </ng-container>
                    </nz-form-control>
                </nz-form-item>
            </form>
        </nz-card>
    </div>
    <div nz-col class="main-panel">
        <div class="gutter-box">

            <nz-card [nzBordered]="false" class="main-grid-card" [nzTitle]="props.name" style="margin-top: 10px">
                <nz-table
                    #dataTable
                    nzBordered
                    nzShowSizeChanger
                    [nzData]="tableData"
                    nzSize="middle"
                    [nzFrontPagination]="false"
                    [nzLoading]="loading"
                    [nzTotal]="total"
                    [(nzPageIndex)]="pageNum"
                    [(nzPageSize)]="pageSize"
                    (nzPageIndexChange)="getGridData()"
                    (nzPageSizeChange)="getGridData(true)">
                    <thead>
                    <tr>
                        <th>名称</th>
                        <th>编码</th>
                        <th>管理单位</th>
                        <th>建设年代</th>
                        <th>位于干渠桩号</th>
                        <th>设计库容（万m³）</th>
                        <th>实际库容（万m³）</th>
                        <th>设计泄洪能力（m³/s）</th>
                        <th>实际泄洪能力（m³/s）</th>
                        <th>来洪沟道名称</th>
                        <th>最大洪峰流量（m³/s）</th>
                        <th>排洪沟（渠）道名称</th>
                        <th>现状过水能力（m³/s）</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr *ngFor="let row of dataTable.data">
                        <td>{{ row.detentionName }}</td>
                        <td>{{ row.detentionCode }}</td>
                        <td>{{ row.manageCode }}</td>
                        <td>{{ row.constructionYear }}</td>
                        <td>{{ row.coordinate }}</td>
                        <td>{{ row.designStorage }}</td>
                        <td>{{ row.actualStorage }}</td>
                        <td>{{ row.designDischarge }}</td>
                        <td>{{ row.actualDischarge }}</td>
                        <td>{{ row.inFloodName }}</td>
                        <td>{{ row.maxFloodFlow }}</td>
                        <td>{{ row.outFloodName }}</td>
                        <td>{{ row.actualCapacity }}</td>
                        <td>
                            <i nz-icon nzType="edit" nzTheme="outline" (click)="openEditModal(row)"></i>
                            <a nz-popconfirm nzPopconfirmTitle="确认删除该条信息吗？" nzPopconfirmPlacement="left"
                               (nzOnConfirm)="onDelete(row.objectid)">
                                <i nz-icon nzType="delete" nzTheme="outline"></i>
                            </a>
                        </td>
                    </tr>
                    </tbody>
                </nz-table>
            </nz-card>
        </div>
        <div nz-col class="right-panel gutter-row">
            <div class="gutter-box">
                <nz-card [nzBordered]="false">
                    <app-statistics [statOpt]="statOpt"></app-statistics>
                </nz-card>
            </div>
        </div>
    </div>

</div>

<nz-modal nzClassName="custom-modal" nzWidth="950" [(nzVisible)]="modalShow" [nzTitle]="modalTitle"
          (nzOnCancel)="onCancel()" (nzOnOk)="onConfirm()">
    <form nz-form [formGroup]="detailForm" class="form-content">
        <div nz-row [nzGutter]="24">
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>名称</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="名称" formControlName="detentionName">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>编码</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="编码" formControlName="detentionCode">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>管理单位</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="管理单位" formControlName="manageCode">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>建设年代</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="建设年代" formControlName="constructionYear">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>位于干渠桩号</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="位于干渠桩号" formControlName="coordinate">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>设计库容</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="设计库容" formControlName="designStorage">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>实际库容</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="实际库容" formControlName="actualStorage">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>设计泄洪能力</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="设计泄洪能力" formControlName="designDischarge">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>实际泄洪能力</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="实际泄洪能力" formControlName="actualDischarge">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>来洪沟道名称</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="来洪沟道名称" formControlName="inFloodName">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>最大洪峰流量</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="最大洪峰流量" formControlName="maxFloodFlow">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>排洪沟（渠）道名称</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="排洪沟（渠）道名称" formControlName="outFloodName">
                    </nz-form-control>
                </nz-form-item>
            </div>
            <div nz-col [nzSpan]="8">
                <nz-form-item>
                    <nz-form-label>现状过水能力</nz-form-label>
                    <nz-form-control>
                        <input nz-input placeholder="现状过水能力" formControlName="actualCapacity">
                    </nz-form-control>
                </nz-form-item>
            </div>
        </div>
    </form>
</nz-modal>
